﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>产品列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="__STATIC__heiseshop_admin/style/adminStyle.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="__STATIC__kindeditor/themes/default/default.css" />
<script charset="utf-8" src="__STATIC__kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="__STATIC__kindeditor/lang/zh-CN.js"></script>
<script src="__STATIC__heiseshop_admin/css/bootstrap.min.css"></script>
<script src="__STATIC__heiseshop_admin/js/bootstrap.min.js"></script>
<script src="__STATIC__heiseshop_admin/js/jquery.js"></script>
</head>

<style> /*表单标签*/ #box{ margin:50px auto; width:600px; padding-bottom: 10px; min-height:400px; background:#FF9; } /*点击添加图片按钮div包裹*/ .addbtn_wrap{ position: relative; left: -5px;top:-5px;} /*添加图片按钮*/ .addbtn{ position: absolute; top:-10px;left:0px} input[type=file]{ width: 100px; position: absolute; top: 5px; opacity: 0; } /*提交按钮*/  /*所有图片div包裹*/ .img_wrap{ width:900px;float: left; } .pic_wrap{ width: 80px; height: 80px; float: left; position: relative; margin: 5px; } .img{ width: 80px; height: 80px; float: left; } .delete{ width: 80px; height: 80px; position: absolute; display: block; border-radius: 6px; } .delete img{ float: right; } </style>

<body>
 <div class="wrap">
  <div class="page-title">
    <span class="modular fl"><i class="add"></i><em>编辑/添加产品</em></span>
    <span class="modular fr"><a href="product_list.html" class="pt-link-btn">产品列表</a></span>
  </div>
  <form action="{:url('product_edit')}" method="post" enctype="multipart/form-data">
  <table class="list-style">
   <tr>
    <td style="text-align:right;width:15%;">产品名称：</td>
    <td><input type="text" class="textBox length-long" value="{$res[0]['shopname']}" name="shopname"/></td>
   </tr>
   <tr>
    <td style="text-align:right;">产品分类：</td>
    <td>
     <select class="textBox" name="cat_id">
      {foreach name="cat" id="v"}
      <optgroup label="{$v.name}" >
        {if condition="isset($v['son'])"}
        {foreach name="v['son']" id="v1"}
          <option value="{$v1.id}" {if condition="$res[0]['cat_id'] eq $v1.id"}selected{/if}>{$v1.name}</option>
          {/foreach}
          {/if}
      </optgroup>            
     {/foreach}
     </select>
    </td>
   </tr>
   <tr>
    <td style="text-align:right;">市场价：</td>
    <td>
     <input type="text" class="textBox length-short" value="{$res[0]['price']}"  name="price"/>
     <span>元</span>
    </td>
   </tr>
   <tr>
    <td style="text-align:right;">会员价：</td>
    <td>
     <input type="text" class="textBox length-short" value="{$res[0]['discount']}" name="discount"/>
     <span>元</span>
    </td>
   </tr>
   <tr>
    <td style="text-align:right;">库存：</td>
    <td>
     <input type="text" class="textBox length-short" value="{$res[0]['stoke']}" name="stoke" />
    </td>
   </tr>
   <tr>
    <td style="text-align:right;">产品关键词：</td>
    <td><input type="text" class="textBox length-long"/></td>
   </tr>
   <tr>
    <td style="text-align:right;">产品描述：</td>
    <td><input type="text" class="textBox length-long"/></td>
   </tr>
   <tr>
    <td style="text-align:right;">推荐至：</td>
    <td>
     <input type="checkbox" name="tuijian" id="jingpin"/>
     <label for="jingpin">精品</label>
     <input type="checkbox" name="tuijian" id="xinpin"/>
     <label for="xinpin">新品</label>
     <input type="checkbox" name="tuijian" id="rexiao"/>
     <label for="rexiao">热销</label>
    </td>
   </tr>
   
   <tr>
    <td style="text-align:right;">产品封面图片：</td>
    <td>
     <label for="src" class="labelBtnAdd">+</label>      
     <input type="file" id="src" class="hide" name="src"/>
     <img src="__UPLOAD__{$res[0]['src']}"  id="img" width="60" height="60" class="mlr5"/>
    </td>
   </tr>
   
   <tr>
    <td style="text-align:right;height:40px">产品主图：</td>
    <td style="position: relative;">
     <input type="file"  multiple="multiple" id="chanpinzhutu" class="hide"/>
     <div class="addbtn_wrap "> <input type="button" class="btn btn-primary addbtn labelBtn2" value="点击添加图片"> <input type="file" name="image[]" id="file1" style="z-index: 1" onchange="getPhoto(this)"> </div>
    </td>
   </tr>
   <tr>
    <td style="text-align:right;"></td>
    <td>
        <div class="img_wrap">
            {foreach name="res" id="value"}
            <img  class="images" src="__UPLOAD__{$value.detailsrc}" style="margin:5px" width="80" height="80"/>
            {/foreach}
        </div>
    </td>
   </tr>
   
   <tr>
    <td style="text-align:right;">产品详情：</td>
    <td><textarea name="detail" id="detail" style="width:400px;height:400px;visibility:hidden;" value="{$res[0]['detail']}">{$res[0]['detail']}</textarea></td>
   </tr>
   <input type="hidden" name="updateid" value="{$Think.get.id}">
   <tr>
    <td style="text-align:right;"></td>
    <td><input type="submit" value="更新保存" class="tdBtn"/></td>
   </tr>
  </table>
  </form>
 </div>
</body>
</html>
<script>
    var editor;
     KindEditor.ready(function(K) {
         editor = K.create('textarea[name="detail"]', {
             allowFileManager : true,
             
             items : [
                  'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                 'anchor', 'link', 'unlink', '|', 'about'
             ],
         });
         
     });
     $('input[name=src]').change(function(){
          var read=new FileReader;
          read.readAsDataURL(this.files[0]);
          read.onload=function(){
              $('#img').attr('src',this.result);
          }
      })
      $('.addbtn_wrap').change(function(){
          $('.images').css('display','none');
      })
</script>

<script type="text/javascript"> /*预览*/ var count=1; function getPhoto(node) { var imgURL = ""; try{ var file = null; if(node.files && node.files[0] ){ file = node.files[0]; }else if(node.files && node.files.item(0)) { file = node.files.item(0); } try{ imgURL = file.getAsDataURL(); }catch(e){ imgRUL = window.URL.createObjectURL(file); } }catch(e){ if (node.files && node.files[0]) { var reader = new FileReader(); reader.onload = function (e) { imgURL = e.target.result; }; reader.readAsDataURL(node.files[0]); } } /*动态添加file和对应的图片预览*/ createPic(); createFile(); count++; return imgURL; } /*创建图片预览元素*/ function createPic() { var picText='<div class="pic_wrap" id=" showPic'+count+'" onmouseover="overDelete(this)" onmouseleave="leaveDelete(this)">'+ '<img src="'+imgRUL+'"" class="img img-rounded">'+ '<div class="delete"><img src="__STATIC__heiseshop_admin/images/no.gif" onclick="deletePic(this)"></div>'+ '</div>'; /*遍历除去最新一个file的所有file，如果有file的值与最后一个file的值相等，不插入预览图*/ for(var i=0;i< $('input[type=file]').length-1;i++){ var val= $('input[type=file]').eq(i).val(); if($('input[type=file]').last().val()==val){ /*此处不插入图片，就让count回到之前那一步，否则id=file和id=showPic的数据后缀对不上，导致file和图片对应错乱*/ count=count-1; return; } } $('.img_wrap').append(picText); } /*创建新的file元素*/ function createFile() { var flieText='<input type="file" name="image[]" id="file'+(count+1)+'" style="z-index: '+(count+1)+'" onchange="getPhoto(this)">'; /*遍历除去最新一个file的所有file，如果有file的值与最后一个file的值相等，提示图片已存在，清空最后一个file*/ for(var i=0;i< $('input[type=file]').length-1;i++){ var val= $('input[type=file]').eq(i).val(); if($('input[type=file]').last().val()==val){ var file = $('input[type=file]').last(); file.after(file.clone().val("")); file.remove(); alert("图片已存在！"); return; } } $('.addbtn_wrap').append(flieText); /*图片数量大于1，显示提交按钮，添加一次判断一次*/ if($('.pic_wrap').length<=0){ $('input[type=submit]').css('display','block'); }else { $('input[type=submit]').css('display','block'); } } /*移入移出，删除遮罩层显示隐藏*/ function overDelete(obj) { $(obj).children('div').show(); } function leaveDelete(obj) { $(obj).children('div').hide(); } /*删除图片和对应的file*/ function deletePic(obj) { /*提取图片的id的数字部分*/ var picId=$(obj).parent().parent().attr('id'); var picVal= picId.replace(/[^0-9]/ig,""); var fileArr=$('input[type=file]'); /*遍历file，如果图片id的数字部分和file的id的数字部分相同，那么文件与图片是对应的，删除图片的同时删除对应的file*/ fileArr.each(function () { /*提取file的id的数字部分*/ var fileId=$(this).attr('id'); var fileVal = fileId.replace(/[^0-9]/ig,""); if(fileVal==picVal){ $(this).remove(); $(obj).parent().parent().remove(); } }); /*图片数量大于1，显示提交按钮,删除一次判断一次*/ if($('.pic_wrap').length<=0){ $('input[type=submit]').css('display','none'); }else { $('input[type=submit]').css('display','block'); } } </script>
